<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Rule Engine</title>
    <link rel="stylesheet" type="text/css" href="css/easyui.css">
    <link rel="stylesheet" type="text/css" href="css/icon.css">
    <link rel="stylesheet" type="text/css" href="css/litegraph.css">
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="js/litegraph.js"></script>
</head>
<body>
<div>
    <h1>Rule Engine</h1>
    <div>
        <a href="#" class="easyui-linkbutton" onclick="onSave()">Save</a>
        <a href="#" class="easyui-linkbutton" onclick="onLoad()">Load</a>
        <a href="#" class="easyui-linkbutton" onclick="onClean()">Clean</a>
    </div>
    <div>
        <canvas id='graphcanvas' width='1024' height='720' style='border: 1px solid'></canvas>
    </div>
</div>
</body>
<script type="text/javascript" src="js/main.js"></script>
<script>
    function onSave() {
        let data = JSON.stringify(this.graph.serialize());
        localStorage.setItem("graph_save", data);
        console.log("save", data);
        $.messager.show({
            title:'My Title',
            msg:'Message will be closed after 5 seconds.',
            timeout:5000,
            showType:'slide'
        });
    }

    function onLoad() {
        var data = localStorage.getItem("graph_save");
        if (data)
            this.graph.configure(JSON.parse(data));
        console.log("loaded");
    }

    function onClean() {
        this.graph.clear();
    }
</script>
</html>
